<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<style>
			*{
				margin: 0;
				padding: 0;
				border: 0;
				list-style: none;
			}
			/*body,
			html{
				height: 100%;	
			}*/
			.box{
				width: 100%;
				height: 100%;
				border: 10px solid #000;
				/** 弹性盒模型新版flex布局  */
				display: flex;
				display: -webkit-flex;
				display: inline-flex;
				display: -webkit-inline-flex;
				/** 设置流动方向是水平还是垂直 row、row-reverse、column、column-reverse  */
				/*flex-direction: row;
				-webkit-flex-direction: row;*/
				/** flex-wrap属性设置项目的换行方式(当容器宽度不足以容纳所有子项目时) nowrap、wrap、wrap-reverse */
				/*flex-wrap: nowrap;
				-webkit-flex-wrap: nowrap;*/
				/** flex-flow属性是flex-direction和flex-wrap属性的速记属性 */
				flex-flow: row nowrap;
				-webkit-flex-flow: row nowrap;
				/** justify-content在当灵活容器内的各项没有占用主轴上所有可用的空间时对齐容器内的各项。(水平) flex-start、center、flex-end、space-between、space-around */
				justify-content: center;
				-webkit-justify-content: center;
				/** align-items属性规定灵活容器内的各项的默认对齐方式，和旧版中的
				 	box-align一样，处理伸缩项目容器的额外空间。 
				 	flex-start、center、flex-end、baseline、stretch
				 */
				/*align-items: center;
				-webkit-align-items: center;*/
			}
			.box p{
				width: 200px;
				/** 高度由内容来撑开 */
				/*height: 200px;*/
				border: 3px solid #808080;
				background-color: #000;
				font: bold 14px 'Microsoft YaHei';
				color: #fff;
				margin: 10px;
				padding: 10px;
			}
			.box p:nth-of-type(2){
				/**
				 * align-self和align-items一样，都是清理额外空间，但它是单独设置
				 * 某一个伸缩项目的。所有的值和align-items一致。
				 */
				align-self: center;
				-webkit-align-self: center;
			}
			/**
				1.flex属性和旧版本中的box-flex类似，用来控制伸缩容器的比例分配。
				2.order属性和旧版本的box-ordinal-group属性一样控制伸缩项目出现的顺序。
			 */
			.box p:nth-of-type(1){
				flex: 1;
				-webkit-flex: 1;
				order: 3;
				-webkit-order: 3;
			}
			.box p:nth-of-type(2){
				flex: 2;
				-webkit-flex: 2;
				order: 1;
				-webkit-order: 1;
			}
			.box p:nth-of-type(3){
				flex: 1;
				-webkit-flex: 1;
				order: 2;
				-webkit-order: 2;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p>NumberOne我就是小小游，英文名是allen!我就是小小游，英文名是allen!</p>
			<p>NumberTwo我就是小小游，英文名是allen!我就是小小游，英文名是allen!我就是小小游，英文名是allen!我就是小小游，英文名是allen!我就是小小游，英文名是allen!我就是小小游，英文名是allen!</p>
			<p>NumberThree我就是小小游，英文名是allen!我就是小小游，英文名是allen!我就是小小游，英文名是allen!我就是小小游，英文名是allen!我就是小小游，英文名是allen!我就是小小游，英文名是allen!我就是小小游，英文名是allen!我就是小小游，英文名是allen!我就是小小游，英文名是allen!我就是小小游，英文名是allen!</p>
		</div>
	</body>
</html>